<template>
  <div class="root">
    <!-- 头部信息区域 -->
    <div class="header">
      <!-- 企业 logo 或占位，可根据实际替换 -->
      <img 
        v-if="enterpriseInfo.logo" 
        class="head-icon" 
        :src="enterpriseInfo.logo" 
        alt="企业logo"
      />
      <span class="baseInfo">企业信息</span>
      <div class="div-holder" />
     
    </div>

    <!-- 基础信息行 -->
    <div class="second-line-div">
      <div class="single-item">
        <span class="secon-line-hint" style="text-align: left">企业名称</span>
        <input class="input-css" v-model="enterpriseInfo.tenantName" disabled />
      </div>
      <div class="single-item">
        <span class="secon-line-hint" style="text-align: left">企业电话</span>
        <input class="input-css" v-model="enterpriseInfo.telephone" disabled />
      </div>
      <div class="single-item">
        <span class="secon-line-hint" style="text-align: left">企业传真</span>
        <input class="input-css" v-model="enterpriseInfo.faxNumber" disabled />
      </div>
      <div class="single-item">
        <span class="secon-line-hint" style="text-align: left">所属行业</span>
        <input class="input-css" v-model="enterpriseInfo.industry" disabled />
      </div>
      <div class="single-item">
        <span class="secon-line-hint" style="text-align: left">开户日期</span>
        <input class="input-css" v-model="enterpriseInfo.updatedTime" disabled />
      </div>
      <div class="single-item">
        <span class="secon-line-hint" style="text-align: left">租户有效期</span>
        <input class="input-css" v-model="enterpriseInfo.validityTime" disabled />
      </div>
      <div class="single-item full-width">
        <span class="secon-line-hint" style="text-align: left">企业地址</span>
        <input class="input-css" v-model="enterpriseInfo.address" disabled />
      </div>
    </div>

    <!-- 企业介绍区域 -->
    <div class="desc-area">
      <span class="secon-line-hint" style="text-align: left">企业介绍</span>
      <textarea class="desc-input" v-model="enterpriseInfo.introduction" disabled></textarea>
    </div>

   
    

   
  </div>
</template>

<script>


export default {
  name: "EnterpriseInfo",
  data() {
    return {
      tenantId: '',
      accountId:'',
      user : JSON.parse(localStorage.getItem('user') || '{}'),
      // 企业信息数据
      enterpriseInfo: {
        name: "--",
        telephone: "--",
        faxNumber: "--",
        industry: "--",
        updatedTime: "--",
        validityTime: "--",
        address: "--",
        introduction: "--",
        logo: "",
        businessLicense: "--",
        industryCert: "--",
        contactsName: "--",
        contactPhone: "--",
      },
  
    };
  },
  mounted() {
    this.setId();    
  },



  methods: {
   setId() {
      this.$request.get('/system/sysTenant/info', {
         params: {
           tenantId: this.user.tenantId
         }}
      ).then(res => { 
      console.log('租户信息完整响应：', res);
      if (res.code === 200) {
        this.enterpriseInfo = res.data;
       
      } else {
        this.$message.error(res.msg || '获取租户信息失败');
      }
    }).catch(err => {
    console.error('获取租户信息时发生错误：', err);
    this.$message.error('网络异常，获取租户信息失败，请稍后重试');
  })},


  
}
};
</script>


<style scoped lang="scss">
// 基础变量，方便统一调整
$base-font: PingFangSC-Regular, PingFang SC, sans-serif; // 统一字体家族
$title-font: PingFangSC-Medium, PingFang SC, sans-serif; // 标题用 Medium 加粗

.root {
  padding-left: 30px;
  padding-right: 30px;
  height: 750px;
  background: #ffffff;
  box-shadow: 0px 2px 8px 0px #eaf0f3;
  border-radius: 8px;
  margin: 28px;
  overflow: auto;
  font-family: $base-font; // 容器统一字体
}

// 头部区域
.header {
  display: flex;
  flex-direction: row;
  padding-top: 40px;
  align-items: center; // 垂直居中，让标题和按钮对齐更协调
}

.head-icon {
  width: 56px;
  height: 56px;
  border-radius: 28px;
  margin-right: 20px;
}

// 页面主标题（企业信息）
.baseInfo {
  font-size: 20px;        // 增大标题字号，突出层级
  font-family: $title-font; 
  font-weight: 500;
  color: #242b35;
  margin: auto; 
}

.div-holder {
  flex-grow: 1;
}

// 按钮通用样式（单独提出来，方便复用）
.btn-common {
  margin: auto;
  padding: 8px 16px;      // 增大点击区域
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;        // 按钮文字适中
  font-family: $base-font;
}

.btn-modify-psw {
  @extend .btn-common;
  background: #26b581;
  color: #fff;
  border: none;
  
  &:hover {
    opacity: 0.9; //  hover 反馈更柔和
  }
}

// 第二行信息区域（表单行）
.second-line-div {
  display: grid;
  grid: auto / auto auto auto;
  grid-gap: 20px;
  margin-top: 24px; // 增大与标题间距
}

.single-item {
  display: flex;
  flex-direction: row;
  align-items: center;
}

// 表单标签
.secon-line-hint {
  width: 100px;
  font-size: 14px;         // 标签文字缩小一点，突出输入内容
  color: #3a4063;
  margin-right: 30px;
  font-family: $base-font;
  font-weight: 400;
}

// 输入框样式
.input-css {
  flex: 1;
  height: 36px;            // 增大输入框高度，让文字更舒展
  line-height: 36px;       // 行高与高度一致，垂直居中
  border: 1px solid #d0d5de;
  border-radius: 4px;
  padding: 0 12px;         // 增大内边距，文字不贴边
  font-size: 14px;         // 输入内容字号
  color: #666;             // 弱化颜色，让标签更突出
  background: #f8f9fa;
  font-family: $base-font;
}

// 企业介绍区域
.desc-area {
  margin-top: 24px; // 与上方间距更舒展
}

// 介绍文本域标签
.desc-area .secon-line-hint {
  display: block;    // 独占一行，更清晰
  margin-bottom: 8px; // 与文本域间距
}

// 文本域样式
.desc-input {
  width: 100%;
  height: 120px;           // 增大高度，适配更多内容
  border: 1px solid #d0d5de;
  border-radius: 4px;
  padding: 12px;           // 增大内边距
  font-size: 14px;
  color: #666;
  background: #f8f9fa;
  resize: none;
  line-height: 1.6;        // 行高适配多行文本
  font-family: $base-font;
}

// 弹窗相关
.el-dialog__title {
  font-size: 16px;         // 弹窗标题层级
  font-family: $title-font;
  font-weight: 500;
  color: #333;
}

// 弹窗表单标签
.el-form-item__label {
  font-size: 14px;
  color: #3a4063;
  font-family: $base-font;
  font-weight: 400;
}

// 弹窗输入框（继承通用输入框，可单独覆盖）
.el-input__inner,
.el-textarea__inner {
  font-size: 14px;
  color: #666;
  font-family: $base-font;
}

// 弹窗按钮区域
.btn-box {
  display: flex;
  justify-content: flex-end; // 按钮靠右更合理
  gap: 12px;                // 替代 margin，间距更均匀
  margin-top: 20px;
}

.btn-close,
.btn-true {
  padding: 8px 20px;        // 增大按钮尺寸
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
  font-family: $base-font;
}

.btn-close {
  border: 1px solid #d0d5de;
  color: #666;
  
  &:hover {
    border-color: #999;
    color: #333;
  }
}

.btn-true {
  background: #26b581;
  color: #fff;
  border: none;
  
  &:hover {
    opacity: 0.9;
  }
}


</style>